﻿import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';
import 'package:vischat/core/annotations/getx_route_enhanced.dart';
import 'package:vischat/modules/login/verifySms/verifySms_binding.dart';
import 'package:vischat/modules/login/verifySms/verifySms_controller.dart';
import 'package:vischat/shared/widgets/tap_to_close_keyboard.dart';

@GetXRoute('/login/verifySms', binding: VerifysmsBinding)
class VerifysmsPage extends GetView<VerifysmsController> {
  const VerifysmsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: TapToCloseKeyboard(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 60.w, vertical: 60.h),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'page.login.enterCode'.tr,
                    style: TextStyle(
                      fontSize: 48.sp,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 20.h),
                  Text(
                    '${'page.login.sent'.tr}${controller.phone}',
                    style: TextStyle(fontSize: 28.sp, color: Colors.black26),
                  ),
                  SizedBox(height: 60.h),
                  Center(
                    key: controller.formKey,
                    child: Form(
                      child: Pinput(
                        length: 4,
                        controller: controller.pinController,
                        onCompleted: controller.handSmsLogin,
                        defaultPinTheme: PinTheme(
                          width: 120.w,
                          height: 120.h,
                          padding: EdgeInsets.only(top: 40.h),
                          textStyle: TextStyle(
                            fontSize: 32.sp,
                            color: Colors.lightBlue,
                          ),
                          decoration: const BoxDecoration(
                            border: Border(
                              bottom: BorderSide(color: Colors.lightBlue),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 60.h),
                  Obx(
                    () =>
                        controller.global.countdown <= 0
                            ? Container()
                            : RichText(
                              text: TextSpan(
                                text: '${controller.global.countdown} ',
                                style: TextStyle(
                                  fontSize: 24.sp,
                                  color: Colors.lightBlue,
                                ),
                                children: [
                                  TextSpan(
                                    text: 'page.login.countdown'.tr,
                                    style: const TextStyle(
                                      color: Colors.black26,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
